<!--
 * @Author: daidai
 * @Date: 2022-03-01 09:43:37
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-09 11:40:22
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-bottom.vue
-->
<template>
  <div class="user_Overview">
    <div class="user_Overview-box">
      <div class="flex">
        <img src="../../assets/img/logo/money.png" alt="" />
        <div class="flex flex-direction">
          <p class="num">*127.70万元</p>
          <p class="text">营业总收入额</p>
        </div>
      </div>
      <div class="flex">
        <img src="../../assets/img/logo/nurse.png" alt="" />
        <div class="flex flex-direction">
          <p class="num">445人</p>
          <p class="text">在线护工人员</p>
        </div>
      </div>
    </div>

    <div
      style="width: 100%; height: 140px; padding: 0 16px; margin-bottom: 10px"
    >
      <Echart
        id="leftCenter"
        :options="options"
        class="left_center_inner"
        v-if="pageflag"
        ref="charts"
      />
    </div>
    <div class="flex justify-end">
      <el-radio-group v-model="radio1" size="mini">
        <el-radio label="本年"></el-radio>
        <el-radio label="本月"></el-radio>
        <el-radio label="本日"></el-radio>
      </el-radio-group>
    </div>
    <div style="width: 100%; height: 200px">
      <Echart
        id="leftCenterBottom"
        :options="optionLine"
        class="left_center_inner"
        ref="chartsLine"
      />
    </div>
  </div>
</template>

<script>
import { currentGET } from "api";
import vueSeamlessScroll from "vue-seamless-scroll"; // vue2引入方式
import Kong from "../../components/kong.vue";
export default {
  components: { vueSeamlessScroll, Kong },
  data() {
    return {
      radio1: "本年",
      list: [],
      pageflag: true,
      components: vueSeamlessScroll,
      defaultOption: {
        ...this.$store.state.setting.defaultOption,
        singleHeight: 240,
        limitMoveNum: 5,
        step: 0,
      },
      config: {
        showValue: true,
        unit: "次",
        data: [
          {
            name: "文化类活动",
            value: 167,
          },
          {
            name: "体育类活动",
            value: 67,
          },
          {
            name: "艺术类活动",
            value: 123,
          },
          {
            name: "分享类活动",
            value: 55,
          },
          {
            name: "教育类活动",
            value: 98,
          },
        ],
      },
      options: {},
      optionLine: {},
    };
  },
  computed: {
    sbtxSwiperFlag() {
      let sbtxSwiper = this.$store.state.setting.sbtxSwiper;
      if (sbtxSwiper) {
        this.components = vueSeamlessScroll;
      } else {
        this.components = Kong;
      }
      return sbtxSwiper;
    },
  },
  created() {},

  mounted() {
    this.init();
    this.getData();
    this.initLine();
  },
  methods: {
    addressHandle(item) {
      let name = item.provinceName;
      if (item.cityName) {
        name += "/" + item.cityName;
        if (item.countyName) {
          name += "/" + item.countyName;
        }
      }
      return name;
    },
    getData() {
      this.pageflag = true;
      // this.pageflag =false
      currentGET("big3", { limitNum: 20 }).then((res) => {
        console.log("设备提醒", res);
        if (res.success) {
          this.countUserNumData = res.data;
          this.list = res.data.list;
          let timer = setTimeout(() => {
            clearTimeout(timer);
            this.defaultOption.step =
              this.$store.state.setting.defaultOption.step;
          }, this.$store.state.setting.defaultOption.waitTime);
        } else {
          this.pageflag = false;
          this.$Message({
            text: res.msg,
            type: "warning",
          });
        }
      });
    },
    init() {
      this.options = {
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(0,0,0,.6)",
          borderColor: "rgba(147, 235, 248, .8)",
          textStyle: {
            color: "#FFF",
          },
        },
        legend: {
          show: true,
          orient: "vertical",
          right: 20,
          top: 20,
          bottom: 20,
          textStyle: {
            color: "#fff",
          },
          formatter: function (name) {
            let data = [
              { name: "已预约", value: "6" },
              { name: "进行中", value: "20" },
              { name: "已完成", value: "4178" },
              { name: "欠费中", value: "55" },
              { name: "已接单，待付款", value: "5" },
              { name: "已完成，待结算", value: "5" },
              { name: "已完成，已退款", value: "137" },
              { name: "已完成，未退款", value: "5" },
            ];

            // let name1 = option.series[0].name;  // 第1组数据的name

            let tarValue; // 定义一个最终结果变量
            // let total1 = 0;  // 定义一个变量，接收第1组数据的和

            for (let i = 0; i < data.length; i++) {
              if (name == data[i].name) tarValue = data[i].value;
            }
            return name + ": " + tarValue;
          },
        },
        series: [
          {
            name: "健康统计与评估",
            type: "pie",
            radius: ["50%", "80%"],
            center: ["20%", "60%"],
            labelLine: false,
            // labelLine: {
            //   length: 30,
            // },
            // label: {
            //   formatter: "   {b|{b}}   \n   {c|{c}个}   {per|{d}%}  ",
            //   //   position: "outside",
            //   rich: {
            //     b: {
            //       color: "#fff",
            //       fontSize: 12,
            //       lineHeight: 26,
            //     },
            //     c: {
            //       color: "#31ABE3",
            //       fontSize: 14,
            //     },
            //     per: {
            //       color: "#31ABE3",
            //       fontSize: 14,
            //     },
            //   },
            // },
            data: [
              { name: "已预约", value: "6" },
              { name: "进行中", value: "20" },
              { name: "已完成", value: "4178" },
              { name: "欠费中", value: "55" },
              { name: "已接单，待付款", value: "5" },
              { name: "已完成，待结算", value: "5" },
              { name: "已完成，已退款", value: "137" },
              { name: "已完成，未退款", value: "5" },
            ],
          },
        ],
      };
    },
    initLine() {
      this.optionLine = {
        textStyle: {
          color: "#FFF",
        },
        grid: {
          top: 40,
          left: 50,
          bottom: 40,
          right: 50,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#fff",
            },
          },
        },
        // toolbox: {
        //   feature: {
        //     dataView: { show: true, readOnly: false },
        //     magicType: { show: true, type: ["line", "bar"] },
        //     restore: { show: true },
        //     saveAsImage: { show: true },
        //   },
        // },
        xAxis: {
          name: "月",
          type: "category",
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
        },
        yAxis: [
          {
            name: "服务工单数",
            type: "value",
          },
          {
            type: "value",
            name: "满意度",
            axisLabel: {
              formatter: "{value} %",
            },
          },
        ],
        series: [
          {
            name: "工单数",
            data: [31, 7, 18, 29, 43, 52, 48, 40, 72, 58, 52, 60],
            type: "bar",
          },
          {
            name: "满意度",
            type: "line",
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + " %";
              },
            },
            data: [
              92.0, 92.2, 93.3, 94.5, 96.3, 90.2, 90.3, 93.4, 93.0, 96.5, 92.0,
              96.2,
            ],
          },
        ],
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.user_Overview {
  &-box {
    width: 100%;
    display: flex;
    // flex-direction: column;
    align-items: center;
    justify-content: space-around;
    padding: 10px 0 0;
    p {
      font-size: 22px;
      margin-bottom: 5px;
    }
    div {
      margin-bottom: 5px;
    }
    img {
      width: 48px;
      height: 48px;
      margin-right: 8px;
    }
    .num {
      font-size: 28px;
      color: aqua;
      margin-bottom: 5px;
    }
    .text {
      font-size: 18px;
    }
  }
}
</style>
